
<!DOCTYPE html>
<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
  <meta charset="utf-8">
  <title>IOS自定义不等高UITableViewCell - 许龙武的技术博客</title>
  <meta name="author" content="许龙武">

  
  <meta name="description" content="在APP中常有类似用户手册问题解答的需求，常常是一问一答的形式。这时候可能问题和答案的长度都不一样，如果用等高的Cell来显示会很难看。这时候就需要不等高的Cell，也就是希望Cell能够自适应高度。这里采用基本的MVC架构。 Model 数据存储 由于考虑到多平台的通用性，选择json保存数据， &hellip;">
  

  <!-- http://t.co/dKP3o1e -->
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  
  <link rel="canonical" href="http://loongwoo.github.io/blog/2015/07/09/at-ioszi-ding-yi-bu-deng-gao-uitableviewcell/">
  <link href="/favicon.png" rel="icon">
  <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
  <link href="/atom.xml" rel="alternate" title="许龙武的技术博客" type="application/atom+xml">
  <script src="/javascripts/modernizr-2.0.js"></script>
  <script src="http://cdn.staticfile.org/jquery/1.9.1/jquery.min.js"></script>
  <script>!window.jQuery && document.write(unescape('%3Cscript src="/javascripts/libs/jquery.min.js"%3E%3C/script%3E'))</script>
  <script src="/javascripts/octopress.js" type="text/javascript"></script>
  

</head>

<body   >
  <header role="banner"><hgroup>
  <h1><a href="/">许龙武的技术博客</a></h1>
  
    <h2>记录所学，快乐分享</h2>
  
</hgroup>

</header>
  <nav role="navigation"><ul class="subscription" data-subscription="rss">
  <li><a href="/atom.xml" rel="subscribe-rss" title="subscribe via RSS">RSS</a></li>
  
</ul>
  
<form action="https://www.google.com/search" method="get">
  <fieldset role="search">
    <input type="hidden" name="sitesearch" value="loongwoo.github.io">
    <input class="search" type="text" name="q" results="0" placeholder="Search"/>
  </fieldset>
</form>
  
<ul class="main-navigation">
	<li><a href="/">首页</a></li>
	<li><a href="/blog/archives">所有文章</a></li>
	<li><a href="http://weibo.com/loongwoo">我的微博</a></li>
</ul>

</nav>
  <div id="main">
    <div id="content">
      <div>
<article class="hentry" role="article">
  
  <header>
    
      <h1 class="entry-title">IOS自定义不等高UITableViewCell</h1>
    
    
      <p class="meta">
        




<time class='entry-date' datetime='2015-07-09T16:59:08+08:00'><span class='date'><span class='date-month'>Jul</span> <span class='date-day'>9</span><span class='date-suffix'>th</span>, <span class='date-year'>2015</span></span> <span class='time'>4:59 pm</span></time>
        
      </p>
    
  </header>


<div class="entry-content"><p>在APP中常有类似用户手册问题解答的需求，常常是一问一答的形式。这时候可能问题和答案的长度都不一样，如果用等高的Cell来显示会很难看。这时候就需要不等高的Cell，也就是希望Cell能够自适应高度。这里采用基本的MVC架构。</p>

<h2>Model</h2>

<h3>数据存储</h3>

<p>由于考虑到多平台的通用性，选择json保存数据，这里用的Pod管理的MJExtension库,方便把json转化为Model，先创建一个questions.json的文件。：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='json'><span class='line'><span class="p">[</span>
</span><span class='line'>  <span class="p">{</span>
</span><span class='line'>    <span class="nt">&quot;ID&quot;</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span>
</span><span class='line'>    <span class="nt">&quot;question&quot;</span><span class="p">:</span> <span class="s2">&quot;我的******为什么不可以用？&quot;</span><span class="p">,</span>
</span><span class='line'>    <span class="nt">&quot;answer&quot;</span><span class="p">:</span> <span class="s2">&quot;1. 确保打开手机麦克风权限，IOS手机请前往‘设置-通用-隐私-麦克风’，找到******并打开；\n2. 确保手机遥控器充满电；\n3. 插入是确保能看到‘******’的信息。&quot;</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">]</span>
</span></code></pre></td></tr></table></div></figure>


<p>内容是一个数组，每一项有3个数据:ID、question和answer。</p>

<h3>ManualModel</h3>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='objectivec'><span class='line'><span class="k">@interface</span> <span class="nc">ManualModel</span> : <span class="bp">NSObject</span>
</span><span class='line'>
</span><span class='line'><span class="k">@property</span> <span class="p">(</span><span class="k">nonatomic</span><span class="p">,</span> <span class="k">assign</span><span class="p">)</span> <span class="bp">NSInteger</span> <span class="n">ID</span><span class="p">;</span>
</span><span class='line'><span class="k">@property</span> <span class="p">(</span><span class="k">nonatomic</span><span class="p">,</span> <span class="k">copy</span><span class="p">)</span> <span class="bp">NSString</span> <span class="o">*</span><span class="n">question</span><span class="p">;</span>
</span><span class='line'><span class="k">@property</span> <span class="p">(</span><span class="k">nonatomic</span><span class="p">,</span> <span class="k">copy</span><span class="p">)</span> <span class="bp">NSString</span> <span class="o">*</span><span class="n">answer</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'><span class="k">@end</span>
</span></code></pre></td></tr></table></div></figure>


<p>ManualModel中的三项和json的一一对应，不对应的话也可以，就是要在转化的时候手动指定就可以了，具体请看<a href="https://github.com/CoderMJLee/MJExtension">MJExtension</a>的讲解。关于生成json对应的Model，有人做了一个Xcode插件<a href="https://github.com/EnjoySR/ESJsonFormat-Xcode">ESJsonFormat-Xcode</a>，图形化快速生成所有的属性，还避免了手动敲代码导致的可能某个属性名差一个字母这些低级错误，用起来还是很方便的。</p>

<h2>View</h2>

<h3>.h文件</h3>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='objectivec'><span class='line'><span class="k">@class</span> <span class="nc">ManualModel</span>;
</span><span class='line'><span class="k">@interface</span> <span class="nc">UnequalHeightCell</span> : <span class="bp">UITableViewCell</span>
</span><span class='line'>
</span><span class='line'><span class="k">@property</span> <span class="p">(</span><span class="k">nonatomic</span><span class="p">,</span> <span class="k">strong</span><span class="p">)</span><span class="n">ManualModel</span> <span class="o">*</span><span class="n">manual</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'><span class="p">+(</span><span class="n">CGFloat</span><span class="p">)</span><span class="nf">cellHeight:</span><span class="p">(</span><span class="n">ManualModel</span><span class="o">*</span><span class="p">)</span><span class="nv">model</span><span class="p">;</span>
</span><span class='line'><span class="k">@end</span>
</span></code></pre></td></tr></table></div></figure>


<p>创建UnequalHeightCell，添加属性manual，以及类的方法cellHeight用来计算cell 的高度。</p>

<h3>.m文件</h3>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
<span class='line-number'>34</span>
<span class='line-number'>35</span>
</pre></td><td class='code'><pre><code class='objectivec'><span class='line'><span class="k">@implementation</span> <span class="nc">UnequalHeightCell</span><span class="p">{</span>
</span><span class='line'>    <span class="bp">UIView</span> <span class="o">*</span><span class="n">questionView</span><span class="p">,</span> <span class="o">*</span><span class="n">answerView</span><span class="p">;</span>
</span><span class='line'>    <span class="bp">UILabel</span> <span class="o">*</span><span class="n">questionLabel</span><span class="p">,</span><span class="o">*</span><span class="n">answerLabel</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="p">-(</span><span class="kt">instancetype</span><span class="p">)</span><span class="nf">initWithStyle:</span><span class="p">(</span><span class="n">UITableViewCellStyle</span><span class="p">)</span><span class="nv">style</span> <span class="nf">reuseIdentifier:</span><span class="p">(</span><span class="bp">NSString</span> <span class="o">*</span><span class="p">)</span><span class="nv">reuseIdentifier</span>
</span><span class='line'><span class="p">{</span>
</span><span class='line'>    <span class="nb">self</span> <span class="o">=</span> <span class="p">[</span><span class="nb">super</span> <span class="nl">initWithStyle</span><span class="p">:</span><span class="n">style</span> <span class="nl">reuseIdentifier</span><span class="p">:</span><span class="n">reuseIdentifier</span><span class="p">];</span>
</span><span class='line'>    <span class="k">if</span> <span class="p">(</span><span class="nb">self</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>        <span class="n">questionView</span><span class="o">=</span><span class="p">[[</span><span class="bp">UIView</span> <span class="n">alloc</span><span class="p">]</span><span class="nl">initWithFrame</span><span class="p">:</span><span class="n">CGRectZero</span><span class="p">];</span>
</span><span class='line'>        <span class="n">questionView</span><span class="p">.</span><span class="n">backgroundColor</span><span class="o">=</span><span class="p">[</span><span class="bp">UIColor</span> <span class="nl">colorWithRed</span><span class="p">:</span><span class="mi">0</span> <span class="nl">green</span><span class="p">:</span><span class="mf">0.75</span> <span class="nl">blue</span><span class="p">:</span><span class="mi">1</span> <span class="nl">alpha</span><span class="p">:</span><span class="mi">1</span><span class="p">];</span>
</span><span class='line'>        <span class="p">[</span><span class="nb">self</span><span class="p">.</span><span class="n">contentView</span> <span class="nl">addSubview</span><span class="p">:</span><span class="n">questionView</span><span class="p">];</span>
</span><span class='line'>
</span><span class='line'>        <span class="n">questionLabel</span><span class="o">=</span><span class="p">[</span><span class="nb">self</span> <span class="nl">labelWithFont</span><span class="p">:</span><span class="n">QFont</span> <span class="nl">textColor</span><span class="p">:[</span><span class="bp">UIColor</span> <span class="n">whiteColor</span><span class="p">]];</span>
</span><span class='line'>        <span class="p">[</span><span class="n">questionView</span> <span class="nl">addSubview</span><span class="p">:</span><span class="n">questionLabel</span><span class="p">];</span>
</span><span class='line'>
</span><span class='line'>        <span class="n">answerView</span><span class="o">=</span><span class="p">[[</span><span class="bp">UIView</span> <span class="n">alloc</span><span class="p">]</span><span class="nl">initWithFrame</span><span class="p">:</span><span class="n">CGRectZero</span><span class="p">];</span>
</span><span class='line'>        <span class="n">answerView</span><span class="p">.</span><span class="n">backgroundColor</span><span class="o">=</span><span class="p">[</span><span class="bp">UIColor</span> <span class="n">whiteColor</span><span class="p">];</span>
</span><span class='line'>        <span class="p">[</span><span class="nb">self</span><span class="p">.</span><span class="n">contentView</span> <span class="nl">addSubview</span><span class="p">:</span><span class="n">answerView</span><span class="p">];</span>
</span><span class='line'>
</span><span class='line'>        <span class="n">answerLabel</span><span class="o">=</span><span class="p">[</span><span class="nb">self</span> <span class="nl">labelWithFont</span><span class="p">:</span><span class="n">AFont</span> <span class="nl">textColor</span><span class="p">:[</span><span class="bp">UIColor</span> <span class="n">blackColor</span><span class="p">]];</span>
</span><span class='line'>        <span class="p">[</span><span class="n">answerView</span> <span class="nl">addSubview</span><span class="p">:</span><span class="n">answerLabel</span><span class="p">];</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>    <span class="k">return</span> <span class="nb">self</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="p">-(</span><span class="bp">UILabel</span><span class="o">*</span><span class="p">)</span><span class="nf">labelWithFont:</span><span class="p">(</span><span class="bp">UIFont</span><span class="o">*</span><span class="p">)</span><span class="nv">font</span> <span class="nf">textColor:</span><span class="p">(</span><span class="bp">UIColor</span><span class="o">*</span><span class="p">)</span><span class="nv">textColor</span><span class="p">{</span>
</span><span class='line'>    <span class="bp">UILabel</span> <span class="o">*</span><span class="n">label</span><span class="o">=</span><span class="p">[[</span><span class="bp">UILabel</span> <span class="n">alloc</span><span class="p">]</span><span class="nl">initWithFrame</span><span class="p">:</span><span class="n">CGRectZero</span><span class="p">];</span>
</span><span class='line'>    <span class="n">label</span><span class="p">.</span><span class="n">backgroundColor</span><span class="o">=</span><span class="p">[</span><span class="bp">UIColor</span> <span class="n">clearColor</span><span class="p">];</span>
</span><span class='line'>    <span class="n">label</span><span class="p">.</span><span class="n">textColor</span><span class="o">=</span><span class="n">textColor</span><span class="p">;</span>
</span><span class='line'>    <span class="n">label</span><span class="p">.</span><span class="n">font</span><span class="o">=</span><span class="n">font</span><span class="p">;</span>
</span><span class='line'>    <span class="n">label</span><span class="p">.</span><span class="n">numberOfLines</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span>
</span><span class='line'>    <span class="n">label</span><span class="p">.</span><span class="n">textAlignment</span><span class="o">=</span><span class="n">NSTextAlignmentLeft</span><span class="p">;</span>
</span><span class='line'>    <span class="k">return</span> <span class="n">label</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>实现初始化函数initWithStyle，放两个label分别显示问题和答案，考虑的上下左右的边缘，加个UIView放置label。记得把questionView和answerView添加到contentView上，这样子做的好处是如果需要进入编辑模式，他会自动缩进。frame可以放到layoutSubviews中统一处理。关于上下左右留出边缘的方法还有一种，就是自定义一个UILabel重写以下方法：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='objectivec'><span class='line'><span class="k">@property</span><span class="p">(</span><span class="k">nonatomic</span><span class="p">)</span> <span class="bp">UIEdgeInsets</span> <span class="n">insets</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'><span class="p">-(</span><span class="kt">void</span><span class="p">)</span><span class="nf">drawTextInRect:</span><span class="p">(</span><span class="bp">CGRect</span><span class="p">)</span><span class="nv">rect</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">return</span> <span class="p">[</span><span class="nb">super</span> <span class="nl">drawTextInRect</span><span class="p">:</span><span class="n">UIEdgeInsetsInsetRect</span><span class="p">(</span><span class="n">rect</span><span class="p">,</span> <span class="nb">self</span><span class="p">.</span><span class="n">insets</span><span class="p">)];</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>这样子要注意的是：根据内容计算出高度之后，就要自己加上上下所留的才是整个Label的高度。在本例中还是用笨一点的方法算了。</p>

<h3>实现manual的set函数</h3>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
</pre></td><td class='code'><pre><code class='objectivec'><span class='line'><span class="p">-(</span><span class="kt">void</span><span class="p">)</span><span class="nf">setManual:</span><span class="p">(</span><span class="n">ManualModel</span> <span class="o">*</span><span class="p">)</span><span class="nv">manual</span><span class="p">{</span>
</span><span class='line'>    <span class="n">_manual</span><span class="o">=</span><span class="n">manual</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>    <span class="n">questionLabel</span><span class="p">.</span><span class="n">text</span><span class="o">=</span><span class="p">[</span><span class="bp">NSString</span> <span class="nl">stringWithFormat</span><span class="p">:</span><span class="s">@&quot;Q%d: %@&quot;</span><span class="p">,(</span><span class="kt">int</span><span class="p">)</span><span class="n">manual</span><span class="p">.</span><span class="n">ID</span><span class="p">,</span><span class="n">manual</span><span class="p">.</span><span class="n">question</span><span class="p">];</span>
</span><span class='line'>    <span class="n">answerLabel</span><span class="p">.</span><span class="n">text</span><span class="o">=</span><span class="n">manual</span><span class="p">.</span><span class="n">answer</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>    <span class="p">[</span><span class="nb">self</span> <span class="n">setNeedsLayout</span><span class="p">];</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="p">-(</span><span class="kt">void</span><span class="p">)</span><span class="nf">layoutSubviews</span><span class="p">{</span>
</span><span class='line'>    <span class="p">[</span><span class="nb">super</span> <span class="n">layoutSubviews</span><span class="p">];</span>
</span><span class='line'>
</span><span class='line'>    <span class="c1">//设置问题的frame</span>
</span><span class='line'>    <span class="n">CGFloat</span> <span class="n">height</span><span class="o">=</span><span class="p">[</span><span class="n">UnequalHeightCell</span> <span class="nl">height</span><span class="p">:</span><span class="n">_manual</span><span class="p">.</span><span class="n">question</span> <span class="nl">font</span><span class="p">:</span><span class="n">QFont</span><span class="p">];</span>
</span><span class='line'>    <span class="n">questionView</span><span class="p">.</span><span class="n">frame</span><span class="o">=</span><span class="n">CGRectMake</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="n">ScreenWidth</span><span class="p">,</span> <span class="n">height</span><span class="p">);</span>
</span><span class='line'>    <span class="n">questionLabel</span><span class="p">.</span><span class="n">frame</span><span class="o">=</span><span class="n">CGRectInset</span><span class="p">(</span><span class="n">questionView</span><span class="p">.</span><span class="n">bounds</span><span class="p">,</span> <span class="n">LeftRightMargin</span><span class="p">,</span> <span class="n">TopBottomMargin</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'>    <span class="c1">//设置答案的frame</span>
</span><span class='line'>    <span class="n">height</span><span class="o">=</span><span class="p">[</span><span class="n">UnequalHeightCell</span> <span class="nl">height</span><span class="p">:</span><span class="n">_manual</span><span class="p">.</span><span class="n">answer</span> <span class="nl">font</span><span class="p">:</span><span class="n">AFont</span><span class="p">];</span>
</span><span class='line'>    <span class="n">answerView</span><span class="p">.</span><span class="n">frame</span><span class="o">=</span><span class="n">CGRectMake</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="n">questionView</span><span class="p">.</span><span class="n">frame</span><span class="p">.</span><span class="n">size</span><span class="p">.</span><span class="n">height</span><span class="p">,</span> <span class="n">ScreenWidth</span><span class="p">,</span> <span class="n">height</span><span class="p">);</span>
</span><span class='line'>    <span class="n">answerLabel</span><span class="p">.</span><span class="n">frame</span><span class="o">=</span><span class="n">CGRectInset</span><span class="p">(</span><span class="n">answerView</span><span class="p">.</span><span class="n">bounds</span><span class="p">,</span> <span class="n">LeftRightMargin</span><span class="p">,</span> <span class="n">TopBottomMargin</span><span class="p">);</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>在调用<code>[self setNeedsLayout];</code>的时候会执行layoutSubviews，设置所有控件的frame。</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
</pre></td><td class='code'><pre><code class='objectivec'><span class='line'><span class="c1">//根据字体计算问题和答案View需要的高度</span>
</span><span class='line'><span class="p">+(</span><span class="n">CGFloat</span><span class="p">)</span><span class="nf">height:</span><span class="p">(</span><span class="bp">NSString</span><span class="o">*</span><span class="p">)</span><span class="nv">text</span> <span class="nf">font:</span><span class="p">(</span><span class="bp">UIFont</span><span class="o">*</span><span class="p">)</span><span class="nv">font</span><span class="p">{</span>
</span><span class='line'>    <span class="bp">CGSize</span> <span class="n">size</span><span class="o">=</span><span class="p">[</span><span class="n">text</span> <span class="nl">sizeWithFont</span><span class="p">:</span><span class="n">font</span> <span class="nl">constrainedToSize</span><span class="p">:</span><span class="n">CGSizeMake</span><span class="p">(</span><span class="n">ScreenWidth</span><span class="o">-</span><span class="mi">2</span><span class="o">*</span><span class="n">LeftRightMargin</span><span class="p">,</span> <span class="mi">2000</span><span class="p">)</span> <span class="nl">lineBreakMode</span><span class="p">:</span><span class="n">NSLineBreakByWordWrapping</span><span class="p">];</span>
</span><span class='line'>    <span class="k">return</span> <span class="n">MAX</span><span class="p">(</span><span class="n">MinHeight</span><span class="p">,</span> <span class="n">ceilf</span><span class="p">(</span><span class="n">size</span><span class="p">.</span><span class="n">height</span><span class="p">)</span><span class="o">+</span><span class="mi">2</span><span class="o">*</span><span class="n">TopBottomMargin</span><span class="p">);</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="c1">//Cell的总高度</span>
</span><span class='line'><span class="p">+(</span><span class="n">CGFloat</span><span class="p">)</span><span class="nf">cellHeight:</span><span class="p">(</span><span class="n">ManualModel</span><span class="o">*</span><span class="p">)</span><span class="nv">model</span><span class="p">{</span>
</span><span class='line'>    <span class="k">return</span> <span class="p">[</span><span class="nb">self</span> <span class="nl">height</span><span class="p">:</span><span class="n">model</span><span class="p">.</span><span class="n">question</span> <span class="nl">font</span><span class="p">:</span><span class="n">QFont</span><span class="p">]</span> <span class="o">+</span> <span class="p">[</span><span class="nb">self</span> <span class="nl">height</span><span class="p">:</span><span class="n">model</span><span class="p">.</span><span class="n">answer</span> <span class="nl">font</span><span class="p">:</span><span class="n">AFont</span><span class="p">];</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>其中sizeWithFont是<a href="http://loongwoo.github.io/blog/2015/07/08/at-ios-nsstringchang-yong-category/">IOS NSString常用Category</a>用了的。cellHeight是构造不等高的cell所必须的。他是questionView和answerView的两个高度和。如果控件更多，计算就复杂一点，意思是一样的。</p>

<h2>Controller</h2>

<p>ViewController继承于UITableViewController，先获取数据源</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
</pre></td><td class='code'><pre><code class='objectivec'><span class='line'><span class="k">@property</span> <span class="p">(</span><span class="k">nonatomic</span><span class="p">,</span> <span class="k">strong</span><span class="p">)</span><span class="bp">NSArray</span> <span class="o">*</span><span class="n">questionAndAnswerArr</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'><span class="p">-(</span><span class="bp">NSArray</span> <span class="o">*</span><span class="p">)</span><span class="nf">questionAndAnswerArr</span><span class="p">{</span>
</span><span class='line'>    <span class="k">if</span><span class="p">(</span><span class="n">_questionAndAnswerArr</span><span class="o">==</span><span class="nb">nil</span><span class="p">){</span>
</span><span class='line'>        <span class="bp">NSString</span> <span class="o">*</span><span class="n">path</span><span class="o">=</span><span class="p">[[</span><span class="bp">NSBundle</span> <span class="n">mainBundle</span><span class="p">]</span> <span class="nl">pathForResource</span><span class="p">:</span><span class="s">@&quot;questions&quot;</span> <span class="nl">ofType</span><span class="p">:</span><span class="s">@&quot;json&quot;</span><span class="p">];</span>
</span><span class='line'>        <span class="bp">NSData</span> <span class="o">*</span><span class="n">data</span><span class="o">=</span><span class="p">[</span><span class="bp">NSData</span> <span class="nl">dataWithContentsOfFile</span><span class="p">:</span><span class="n">path</span><span class="p">];</span>
</span><span class='line'>        <span class="bp">NSArray</span> <span class="o">*</span><span class="n">tmp</span><span class="o">=</span><span class="p">[</span><span class="n">data</span> <span class="n">JSONObject</span><span class="p">];</span>
</span><span class='line'>        <span class="n">_questionAndAnswerArr</span><span class="o">=</span><span class="p">[</span><span class="n">ManualModel</span> <span class="nl">objectArrayWithKeyValuesArray</span><span class="p">:</span><span class="n">tmp</span><span class="p">];</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>    <span class="k">return</span> <span class="n">_questionAndAnswerArr</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>objectArrayWithKeyValuesArray是MJExtension中的方法，可以把字典的数组转化为Model的数组。然后在实现UITableViewDataSource的三个方法</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
</pre></td><td class='code'><pre><code class='objectivec'><span class='line'><span class="cp">#pragma UITableViewDelegate &amp; UITableViewDataSource</span>
</span><span class='line'><span class="p">-(</span><span class="bp">NSInteger</span><span class="p">)</span><span class="nf">tableView:</span><span class="p">(</span><span class="bp">UITableView</span> <span class="o">*</span><span class="p">)</span><span class="nv">tableView</span> <span class="nf">numberOfRowsInSection:</span><span class="p">(</span><span class="bp">NSInteger</span><span class="p">)</span><span class="nv">section</span><span class="p">{</span>
</span><span class='line'>    <span class="k">return</span> <span class="nb">self</span><span class="p">.</span><span class="n">questionAndAnswerArr</span><span class="p">.</span><span class="n">count</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="p">-(</span><span class="n">CGFloat</span><span class="p">)</span><span class="nf">tableView:</span><span class="p">(</span><span class="bp">UITableView</span> <span class="o">*</span><span class="p">)</span><span class="nv">tableView</span> <span class="nf">heightForRowAtIndexPath:</span><span class="p">(</span><span class="bp">NSIndexPath</span> <span class="o">*</span><span class="p">)</span><span class="nv">indexPath</span><span class="p">{</span>
</span><span class='line'>    <span class="n">ManualModel</span> <span class="o">*</span><span class="n">model</span><span class="o">=</span><span class="nb">self</span><span class="p">.</span><span class="n">questionAndAnswerArr</span><span class="p">[</span><span class="n">indexPath</span><span class="p">.</span><span class="n">row</span><span class="p">];</span>
</span><span class='line'>    <span class="k">return</span> <span class="p">[</span><span class="n">UnequalHeightCell</span> <span class="nl">cellHeight</span><span class="p">:</span><span class="n">model</span><span class="p">];</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="p">-(</span><span class="bp">UITableViewCell</span><span class="o">*</span><span class="p">)</span><span class="nf">tableView:</span><span class="p">(</span><span class="bp">UITableView</span> <span class="o">*</span><span class="p">)</span><span class="nv">tableView</span> <span class="nf">cellForRowAtIndexPath:</span><span class="p">(</span><span class="bp">NSIndexPath</span> <span class="o">*</span><span class="p">)</span><span class="nv">indexPath</span><span class="p">{</span>
</span><span class='line'>    <span class="k">static</span> <span class="bp">NSString</span> <span class="o">*</span><span class="n">identity</span><span class="o">=</span><span class="s">@&quot;mycell&quot;</span><span class="p">;</span>
</span><span class='line'>    <span class="n">UnequalHeightCell</span> <span class="o">*</span><span class="n">cell</span><span class="o">=</span><span class="p">[</span><span class="n">tableView</span> <span class="nl">dequeueReusableCellWithIdentifier</span><span class="p">:</span><span class="n">identity</span><span class="p">];</span>
</span><span class='line'>    <span class="k">if</span> <span class="p">(</span><span class="n">cell</span><span class="o">==</span><span class="nb">nil</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>        <span class="n">cell</span><span class="o">=</span><span class="p">[[</span><span class="n">UnequalHeightCell</span> <span class="n">alloc</span><span class="p">]</span><span class="nl">initWithStyle</span><span class="p">:</span><span class="n">UITableViewCellStyleDefault</span> <span class="nl">reuseIdentifier</span><span class="p">:</span><span class="n">identity</span><span class="p">];</span>
</span><span class='line'>        <span class="n">cell</span><span class="p">.</span><span class="n">selectionStyle</span><span class="o">=</span><span class="n">UITableViewCellSelectionStyleNone</span><span class="p">;</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>    <span class="n">cell</span><span class="p">.</span><span class="n">manual</span><span class="o">=</span><span class="nb">self</span><span class="p">.</span><span class="n">questionAndAnswerArr</span><span class="p">[</span><span class="n">indexPath</span><span class="p">.</span><span class="n">row</span><span class="p">];</span>
</span><span class='line'>    <span class="k">return</span> <span class="n">cell</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'><span class="cp">#pragma UITableViewDelegate &amp; UITableViewDataSource</span>
</span></code></pre></td></tr></table></div></figure>


<p>注意到heightForRowAtIndexPath中返回的不是一个固定的值了。而是根据数据源算出来的值。这就实现了不等高的Cell。</p>

<h2>效果展示</h2>

<p><img src="/images/unequalcell.png" alt="效果图" /></p>

<h2>源码下载</h2>

<p><a href="https://github.com/Loongwoo/UnequalHeightDemo">UnequalHeightCellDemo</a></p>
</div>


  <footer>
    <p class="meta">
      
  

<span class="byline author vcard">Posted by <span class="fn">许龙武</span></span>

      




<time class='entry-date' datetime='2015-07-09T16:59:08+08:00'><span class='date'><span class='date-month'>Jul</span> <span class='date-day'>9</span><span class='date-suffix'>th</span>, <span class='date-year'>2015</span></span> <span class='time'>4:59 pm</span></time>
      


      <br>原文链接：<a href="http://loongwoo.github.io/blog/2015/07/09/at-ioszi-ding-yi-bu-deng-gao-uitableviewcell/">http://loongwoo.github.io/blog/2015/07/09/at-ioszi-ding-yi-bu-deng-gao-uitableviewcell/</a>
 <!-- 添加这一行代码 -->
    </p>
    
      <div class="sharing">
  
  
  
  
  <!-- JiaThis Button BEGIN -->
<div class="jiathis_style_32x32">
  <a class="jiathis_button_qzone"></a>
  <a class="jiathis_button_tsina"></a>
  <a class="jiathis_button_tqq"></a>
  <a class="jiathis_button_weixin"></a>
  <a class="jiathis_button_renren"></a>
  <a href="http://www.jiathis.com/share?uid=2043882" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>
  <a class="jiathis_counter_style"></a>
</div>
<script type="text/javascript">var jiathis_config = {data_track_clickback:'true'};</script>
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=2043882" charset="utf-8"></script>
<!-- JiaThis Button END -->

<!--UY BEGIN -->
<div id="uyan_frame"></div>
<script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js?uid=2043882"></script>
<!--UY END -->

  
</div>

    
    <p class="meta">
      
        <a class="basic-alignment left" href="/blog/2015/07/09/at-iosxiao-xi-zhuan-fa-ji-zhi/" title="Previous Post: IOS消息转发机制">&laquo; IOS消息转发机制</a>
      
      
        <a class="basic-alignment right" href="/blog/2015/08/17/iosshe-ji-mo-shi/" title="Next Post: IOS设计模式">IOS设计模式 &raquo;</a>
      
    </p>
  </footer>
</article>

</div>

<aside class="sidebar">
  
    <section>
  <h1>最新文章</h1>
  <ul id="recent_posts">
    
      <li class="post">
        <a href="/blog/2016/01/28/stringmanage-a-xcode-plugin-for-managing-your-strings/">StringManage -- a Xcode Plugin for Managing Your Strings</a>
      </li>
    
      <li class="post">
        <a href="/blog/2015/09/12/iosshi-yong-bundle/">iOS使用Bundle</a>
      </li>
    
      <li class="post">
        <a href="/blog/2015/09/12/iosduo-ge-localizable-dot-strings/">IOS多个Localizable.strings</a>
      </li>
    
      <li class="post">
        <a href="/blog/2015/09/11/iosxian-zhi-uitextfieldchang-du/">IOS限制UITextField长度</a>
      </li>
    
      <li class="post">
        <a href="/blog/2015/09/11/ioszi-dong-bu-ju-constraintswithvisualformat/">IOS自动布局constraintsWithVisualFormat</a>
      </li>
    
  </ul>
</section>




<section>
	<h1>关于我</h1>
    <p>程序员、创业者、IOS开发工程师
	<br/>新浪微博：<a href='http://weibo.com/loongwoo' target='_blank'>商陆_Xu</a>
	<br/>新浪博客：<a href="http://blog.sina.com.cn/lunaize" target="_blank" title="商陆的博客">商陆</a>
	<br/>GitHub：<a href='https://github.com/loongwoo' target='_blank'>Loongwoo</a>
	<br/>Git@OSC: <a href='http://git.oschina.net/redder_xu' target='_blank'>redder_xu</a>
    <br/>CSDN博客：<a href="http://blog.csdn.net/redder_xu" target="_blank" title="CSDN">霜叶红于二月花</a>
	<br/>个人微信：xulongwu77 欢迎调戏
	<br/><img width="220px" src="/images/myweixin.jpg" />
	</p>
</section>
<section>
  <h1>友情链接</h1>
  <ul>
  <li><a href="http://blog.devtang.com" target="_blank" title="唐巧的技术博客">唐巧的技术博客</a></li>
  <li><a href="http://www.leichunfeng.com" target="_blank" title="雷纯锋的技术博客">雷纯锋的技术博客</a></li>
  <li><a href="http://www.superqq.com" target="_blank" title=“刚刚在线”>刚刚在线</a></li>
  </ul>
</section>

  
</aside>


    </div>
  </div>
  <footer role="contentinfo"><p>
  Copyright &copy; 2017 - 许龙武 -
  <span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
  <script language="javascript" type="text/javascript" src="http://js.users.51.la/17858326.js"></script>
<noscript><a href="http://www.51.la/?17858326" target="_blank"><img alt="&#x6211;&#x8981;&#x5566;&#x514D;&#x8D39;&#x7EDF;&#x8BA1;" src="http://img.users.51.la/17858326.asp" style="border:none" /></a></noscript>

</p>

</footer>
  











</body>
</html>
